<extend name="Public/base"/>

<block name="body">
    <div class="main-title">
        <h2>设置栏目【{$data['title']}】首推视频 <button class="btn btn-default btn-return" onclick="javascript:history.back(-1);return false;"><i class="glyphicon glyphicon-share-alt"></i> 返 回</button></h2>
    </div>
    <div class="tab-content">
    <form action="" method="post" class="form">
        <table width="400">
            <tbody>
<!--                 <tr><td><label class="item-label">视频</label></td></tr>
 -->                <tr>
                    <td>
                        <div class="form-item">
<!--                         <label class="item-label"><span class="check-tips"></span></label>
 -->                            <div class="form-item cf edit_sort edit_sort_l form_field_sort" style="width: 400px;">
                            <span>栏目视频 点击<i class="glyphicon glyphicon-arrow-right"></i> 进行添加</span>
                                <ul class="dragsort" data-group="videos">
                                    <volist name="videos" id="v">
                                        <li title="{$v.full_title|default=$v['title']|htmlspecialchars_decode}" class="getSort">
                                            <em data="{$v.id}">{$v.full_title|default=$v['title']|htmlspecialchars_decode|mb_substr=0,20,'utf-8'}</em>
                                            <input type="hidden" value="{$v.id}"/>
                                            <i class="glyphicon glyphicon-arrow-right sort-add"></i>
                                        </li>
                                    </volist>
                                </ul>
                            </div>
                        </div>

               
                    </td>
                    <td>


                        <div class="form-item">
                          <div class="form-item cf edit_sort edit_sort_l form_field_sort" style="width: 400px;">
                            <span>首页显示 拖动进行排序</span>
                                <ul class="dragsort needdragsort" data-group="videos">
                                    <volist name="selectedViedo" id="video">
                                        <li title="{$video.full_title|default=$video['title']|htmlspecialchars_decode}" class="getSort">
                                            <em data="{$video.id}">{$video.full_title|default=$video['title']|htmlspecialchars_decode|mb_substr=0,20,'utf-8'}</em>
                                            <input type="hidden" name="videos[]" value="{$video.id}"/>
                                            <i class="glyphicon glyphicon-remove sort-remove"></i>
                                        </li>
                                    </volist>
                                </ul>
                            </div>
                        </div>
 
                    </td>
                </tr>
            </tbody>
        </table>
        <br><br>
        <div class="form-item form-group form-action">
            <button class="btn submit-btn ajax-post btn-success btn-block" type="submit" target-form="form">确 定</button>
            <!-- <button class="btn btn-return" onclick="javascript:history.back(-1);return false;">返 回</button> -->
        </div>
    </form>
    </div>
</block>

<block name="script">
    <script type="text/javascript" src="__STATIC__/jquery.dragsort-0.5.1.min.js"></script>
    <script type="text/javascript">

        //确认提交前把selected框所有选中
        /*function do_submit(){
            $('#selected_video').find('option').prop('selected',true);
        }*/

    /*    //对增加按钮进行事件绑定
        $('.add_em').click( function(){
            var optionType = "#select_video option:selected";
            var selectedType = "#selected_video";
            var selectVal = $("#select_video").val();
            if(selectVal){
                $(optionType).each( function(){
                    $(selectedType).append("<option selected value='"+$(this).val()+"'>"+$(this).text()+"</option");
                });
            }
        });

        //对移除按钮进行事件绑定
        $('.remove_em').click( function(){
            var optionType = "#selected_video option:selected";
            var selectVal = $("#selected_video").val();
            if(selectVal){
                $(optionType).each( function(){
                    $(this).remove();  
                });
            };
        });

        //置顶
        $('.JS_first').click(function(){
            var classType = "#selected_video";
            var optionType = "#selected_video option:selected";
            var selectVal = $(classType).val();
            if(selectVal){
                $(optionType).each( function(){
                    $(classType).prepend("<option selected value='"+$(this).val()+"'>"+$(this).text()+"</option");
                    $(this).remove();  
                });
            };
        });

        //往上
        $('.JS_up').click(function(){
            var optType = "#selected_video option";
            var optSelType = "#selected_video option:selected";
            var selectVal = $("#selected_video").val();
            if(selectVal){
                var index = $(optSelType).eq(0).index() - 1;
                index = index < 0 ? 0 : index;
                $(optSelType).each( function(){
                    $(optType).eq(index).before("<option selected value='"+$(this).val()+"'>"+$(this).text()+"</option");
                    $(this).remove();  
                });
            };
        });

        //往下
        $('.JS_down').click(function(){
            var optType = "#selected_video option";
            var optSelType = "#selected_video option:selected";
            var selectVal = $("#selected_video").val();
            if(selectVal){
                var index = $(optSelType).eq(0).index() + 1,
                    l = $(optType).length - 1;
                index = index > l ? l : index;
                $(optSelType).each( function(){
                    $(optType).eq(index).after("<option selected value='"+$(this).val()+"'>"+$(this).text()+"</option");
                    $(this).remove();  
                });
            };
        });

        //置底
        $('.JS_last').click(function(){
            var classType = "#selected_video";
            var optionType = "#selected_video option:selected";
            var selectVal = $("#selected_video").val();
            if(selectVal){
                $(optionType).each( function(){
                    $(classType).append("<option selected value='"+$(this).val()+"'>"+$(this).text()+"</option");
                    $(this).remove();  
                });
            };
        });*/

        //导航高亮
        highlight_subnav('{:U('index')}');
        showTab();
        $(function(){
            $(".needdragsort").dragsort({
                 dragSelector:'li',
                 placeHolderTemplate: '<li class="draging-place">&nbsp;</li>',
                 dragBetween:true,  //允许拖动到任意地方
                 dragEnd:function(){
                     var self = $(this);
                     self.find('input').attr('name', self.closest('ul').data('group') + '[]');
                 }
             });
            $(document).on('click', '.sort-remove', function(){
                $(this).parent().remove();
            });
            $(document).on('click','.sort-add', function(){
                var title = $(this).parent().find('em').html();
                var id  = $(this).parent().find('input').val();

                var ids_input = $('.needdragsort').find('input');
                var is_do = true;
                ids_input.each(function(i){
                    if ( parseInt($(this).val()) == parseInt(id) )
                    {
                        is_do = false;
                    }
                });
                if (!is_do)
                {
                    return;
                }
                var key = $(".needdragsort").data('group');
                var html = '<li class="getSort"><em data="'+id+'">'+title+'</em><input type="hidden" name="videos[]" value="'+id+'"/><i class="glyphicon glyphicon-remove sort-remove"></i></li>';
                $(".needdragsort").append(html);     
            });
        })
    </script>
</block>
